<template>
  <div class="background">
      <p class="title">请上传两张照片</p>
      <div class="wrap">
        <el-upload
          class="avatar-uploader"
          style="float:left"
          action
          :auto-upload="false"
          :show-file-list="false"
          :on-change="changeImg1"
          >
          <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
          <div v-else class="tip">
            <i  class="el-icon-plus avatar-uploader-icon"></i>
            <span class="word">上传人脸照片</span>            
          </div>
        </el-upload>
        <el-upload
          class="avatar-uploader"
          style="float:right"
          action
          :auto-upload="false"
          :show-file-list="false"
          :on-change="changeImg2">
          <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
          <div v-else class="tip">
            <i  class="el-icon-plus avatar-uploader-icon"></i>
            <span class="word" >上传人脸照片</span>            
          </div>
        </el-upload>
        <div class="progress-box">
          <span class="text"> 置信度：</span>
          <el-progress class="progress" :text-inside="true" :stroke-width="26" :percentage="confidence"></el-progress>
        </div>
        <el-button class="sub-btn" type="primary" v-loading.fullscreen.lock="fullscreenLoading" @click="submit">提交</el-button>
      </div>
      
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      imageUrl1: '',
      imageUrl2: '',
      param:{},
      file1:"",
      file2:"",
      confidence:0,
      fullscreenLoading: false,
      flag:false,
      flag1:false
    }
  },
  methods:{
    handleAvatarSuccess1(res, file) {
    },
    changeImg1(file, fileList){
      console.log(444)
        this.imageUrl1 = URL.createObjectURL(file.raw);
         const isJPG = file.raw.type === "image/jpeg";
        const isPNG = file.raw.type === "image/png";
        if (!(isJPG || isPNG)) {
          this.$message({
            type: "warning",
            message: "请选择格式为jpeg或png格式的文件",
            duration: 1000
          });
          return false;
        }else{
          this.file1 = file.raw
          this.flag = true  //标志位
        }

    },
    changeImg2(file, fileList){
      console.log(444)
        this.imageUrl2 = URL.createObjectURL(file.raw);
        const isJPG = file.raw.type === "image/jpeg";
        const isPNG = file.raw.type === "image/png";
        if (!(isJPG || isPNG)) {
          this.$message({
            type: "warning",
            message: "请选择格式为jpeg或png格式的文件",
            duration: 1000
          });
          return false;
        }else{
          this.file2 = file.raw        
          this.flag1 = true     //标志位
        }

    },
    submit(){
      if(this.flag&&this.flag1){
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              });
            this.param = new FormData();
            this.param.append("image1",this.file1)
            this.param.append("image2",this.file2)
      
          this.$axios({
                      method:'post',
                      url:'http://192.168.50.102:8081/postOvo',
                      data:this.param
                  }).then((res) =>{          //这里使用了ES6的语法
                      loading.close();
                      console.log(res.data.confidence)       //请求成功返回的数据
                      this.confidence = Math.round(res.data.confidence * 100)
                  }).catch((error) =>{
                      console.log(error)       //请求失败返回的数据
                  })
    }else{
      this.$message(
      {
        message: '警告，请选择两张图片后再提交！',
          type: 'warning'
      });
    }
      }
 
   
   
   
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.background{
  padding-top: 80px;
}
  .title{
    width: 100%;
    text-align: center;
    font-size: 26px;

  }
  .wrap{
    width: 45%;
    margin: 0 auto;
    overflow: hidden;
    padding-top: 30px
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .tip{
    width: 178px;
    height: 123px;
    text-align: center;
    background: #fff;
    padding-top: 55px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    display: block
    
  }
  .avatar {
    width: 178px;
    height: 178px;
    /* display: block; */
  }
  .progress-box{
    clear: both;
    padding-top: 30px
  }
  .progress-box .text{
    display: inline-block;
    width: 16%;
    color: #fff;
    font-size: 1em
  }
  .progress{
    display: inline-block;
    width: 82%;
  }
  .sub-btn{
    display: block;
    margin: 30px auto;
  }
  .tip .word{
    display: inline-block;
    margin-top: 15px;
    color: #666;
  }
</style>
